<template>
  <!-- 表单 -->
  <el-form
    ref="addForm"
    :model="formData"
    :rules="rules"
    label-width="120px"
  >
    <el-form-item
      label="姓名"
      prop="username"
    >
      <el-input
        v-model="formData.username"
        style="width:50%"
        placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item
      label="手机"
      prop="mobile"
    >
      <el-input
        v-model="formData.mobile"
        style="width:50%"
        placeholder="请输入手机号"
      />
    </el-form-item>
    <el-form-item
      label="入职时间"
      prop="timeOfEntry"
    >
      <el-date-picker
        v-model="formData.timeOfEntry"
        style="width:50%"
        placeholder="请选择入职时间"
      />
    </el-form-item>
    <el-form-item
      label="聘用形式"
      prop="formOfEmployment"
    >
      <el-select
        v-model="formData.formOfEmployment"
        style="width:50%"
        placeholder="请选择"
      >
        <el-option
          v-for="(item) in EmployeeEnum.hireType"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="工号"
      prop="workNumber"
    >
      <el-input
        v-model="formData.workNumber"
        style="width:50%"
        placeholder="请输入工号"
      />
    </el-form-item>
    <el-form-item
      label="部门"
      prop="departmentName"
    >
      <el-input
        v-model="formData.departmentName"
        style="width:50%"
        placeholder="请选择部门"
        @focus="showTree=true"
      />
    </el-form-item>
    <el-form-item
      v-if="showTree"
    >
      <el-tree
        :data="treeData"
        :props="{ label: 'name' }"
        @node-click="hNodeClick"
      />
    </el-form-item>
    <el-form-item
      label="转正时间"
      prop="correctionTime"
    >
      <el-date-picker
        v-model="formData.correctionTime"
        style="width:50%"
        placeholder="请选择转正时间"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="hCancel(addForm)">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm(addForm)"
      >
        确定
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import EmployeeEnum from '@/constant/employees.js'
import { transTreeData } from '@/utils/transTreeData'
import { getDepartments } from '@/api/departments'
import { addEmployee } from '@/api/employees'
//注册自定义事件
const emit =defineEmits(['close','success'])
//表单验证
const addForm = ref<FormInstance>()
const formData=reactive<EmployeeList>({
  username: '',         // 用户名
  mobile: '',           // 手机号
  formOfEmployment: '', // 聘用形式
  workNumber: '',       // 工号
  departmentName: '',   // 部门
  timeOfEntry: '',      // 入职时间
  correctionTime: '',    // 转正时间
})
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '用户姓名不能为空', trigger: 'blur' },
    { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  formOfEmployment: [
    { required: true, message: '聘用形式不能为空', trigger: 'blur' },
  ],
  workNumber: [
    { required: true, message: '工号不能为空', trigger: 'blur' },
  ],
  departmentName: [
    { required: true, message: '部门不能为空', trigger: 'change' },
  ],
  timeOfEntry: [
    { required: true, message: '请选择入职时间', trigger: 'blur' },
  ],
})
//兜底验证
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if(!valid) return
    loadAddEmployee()
  })
}
//重置表单
const hCancel=(formEl: FormInstance | undefined) => {
  if (!formEl) return
  addForm.value?.resetFields()
  emit('close')
}
//获取树形数据
const treeData=ref<Array<TreeObj>>()
const showTree=ref(false)
const loadDepartments =async() => {
  try {
    const res = await getDepartments()
    console.log('getDepartments',res)
    res.data.depts.shift()
    treeData.value=transTreeData(res.data.depts)
    console.log('treeData',treeData.value)
  } catch (error) {
    console.log(error)
  }
}
loadDepartments()
//选择部门名称
interface Tree {
  name: string
  children?: Tree[]
}
const hNodeClick=(data: Tree) => {
  console.log(data,'data')
  if(data.children?.length) return
  formData.departmentName=data.name
  showTree.value=false
}
//增加员工
const loadAddEmployee =async() => {
  try {
    const res = await addEmployee(formData)
    console.log('addEmployee',res)
    emit('success')
  } catch (error) {
    console.log(error)
  }
}
//暴露方法
defineExpose({ hCancel })
</script>

<style lang="scss">
.el-dialog__header{
    background-color: #fff;
}
</style>